
<template>
    <div class="wonderful-activity">
        <div class="titleContainer"><!--“精彩活动”四个字部分-->
            <div class="common-titleContainer">
                <h1 class="white" style="text-align: left;
                font-family:;
                line-height: calc(15.5rem);">
                    精彩活动</h1>
            </div>
        </div>
        <div class="agenda-main "><!--活动部分-->
            <div class="ax-filter"><!--分类标题部分-->
                <a class="ax-active">全部</a>
                <a>格致论道</a>
                <a>西湖论剑安全特训营</a>
                <a>新品发布</a>
                <a>第二直播间</a>
                <a>掌上论剑</a>
                <a>西湖论剑十周年回顾</a>
            </div>
            <div class="activity-list"><!--活动展示部分-->
                <div class="ax-item">
                    <div class="actimg">
                        <a href="###"></a>
                    </div>
                    <div class="actcontent">
                        <div class="ax-title">
                            <h1 class="text-overflow">格致论道@西湖论剑</h1>
                            <span>+ 订阅</span>
                            <p class="text-overflow2">“格致论道”是中国科学院计算机网络信息中心和中国科学院科学传播局联合主办的科学文化讲坛。
                                致力于非凡思想的跨界交流，提倡以"格物致知"的精神探讨科技、教育、生活、未来的发展。
                            </p>
                        </div>
                        <div class="ax-from">
                            <span>2023-05-05 18:30 - 21:45&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 1280人预约</span>
                            <a href="###" class="hover link-button">了解详情</a>
                        </div>
                        
                    </div>
                </div>
                <div class="ax-item"></div>
                <div class="ax-item"></div>
                <div class="ax-item"></div>
                <div class="ax-item"></div>
                <div class="ax-item"></div>
                <div class="ax-item"></div>
                <div class="ax-item"></div>
            </div>
        </div>
    </div>
</template>

<script setup name="WonderfulActivity">
// import gezhilundao from '@/assets/wonderfulActivity/gezhilundao.png'


</script>
<style scoped lang="scss">
form, div, p {
    display: block;
}
div, input, p, span {
    box-sizing: border-box;
}

.wonderful-activity{
    /* background-color:antiquewhite; */
    width: 100%; 
    height: 3000px;
    
}

.titleContainer{
        /* background-color: aqua; */
        width: 100%;
        height: 400px;
        background-image: url(../assets/wonderfulActivity/wonderfulactivity_banner.jpg) ;
        background-repeat: no-repeat;
        background-size: 100%;
        .common-titleContainer{
            width: 1440px;
            /* height: 44px; */
            margin: 105px 100px 0px 300px;
            /* background-color:aquamarine; */
        }
        .white{
            color: #fff!important;
        }
    }

h1{
    font-size: 3.6rem;
    font-weight: 700;
    /* margin-bottom: 3rem; */
    margin-top: 50px; 
}


.agenda-main{
    background: #fff; 
    // background-color: aqua;
    height: 4500px;
    box-shadow: 0 0.4rem 0.9rem 0.1rem #03242c;
    border-radius: 1rem;
    padding: 5.4rem;
    width: 144rem;
    max-width: 75%;
    margin: 0 auto;
    .ax-filter{
        // background-color: yellow;
        background: #fff;
        height: 72px;
        width: 2000px;
        margin: 0 auto;
        width: auto;
        font-size: 1.6rem;
        a.ax-active{
            background: linear-gradient(39deg,#3b7bc9,#59afb8);
            background-image: linear-gradient(39deg, rgb(59, 123, 201), rgb(89, 175, 184));
            background-position-x: initial;
            background-position-y: initial;
            background-size: initial;
            background-repeat: initial;
            background-attachment: initial;
            background-origin: initial;
            background-clip: initial;
            background-color: initial;
            color: #fff;
            margin-left: 1rem;
        }

        a{
            font-size: 22px;
            min-width: 12rem;
            padding: 0 2rem;
            margin-bottom: 3rem;
            border: 0.1rem solid #00b4bc;
            border-image: initial;
            height: 4rem;
            border-radius: 2rem;
            text-align: center;
            line-height: 4rem;
            margin-right: 1.4rem;
        }
    }

    .activity-list{
        background-color:#fff;
        width:1458.47px;
        height:3786px;
        margin-top: 50px;
        //.ax-item{
            // background-color: #3b7bc9;
            // margin-bottom: 11rem;
            // box-shadow: 0 0.8rem 3.6rem 0.2rem rgb(132 143 155 / 15%);
        //}

        .ax-item{
            width: 100%;
            height: 375px;
           // background-color: #00b4bc;
            background: #fff;
            margin-bottom: 11rem;
            box-shadow: 0 0.8rem 3.6rem 0.2rem rgb(132 143 155 / 15%);
            border: 1px solid #ebebeb;

            padding: 0;
            display: flex;
            justify-content: right;
            flex-flow: row-reverse;
            .actimg{
                height: 100%;
                width: 46%;
                background-color: #00b4bc;
                // background: #fff;
                // overflow: hidden;
                position: relative;
                display: block;
                margin: 0;
                background-image: url(../assets/wonderfulActivity/gezhilundao.png);
                background-repeat: no-repeat;
                background-size: 100%;

            }

            .actcontent{
                float: right;
                // background-color: #00b4bc;
                background: #fff;
                display: block;
                width: 54%;
                height: 100%;
                background-image: url(../assets/wonderfulActivity/wonderfulactivity_bg1.png);
                background-repeat: no-repeat;
                background-size: 100%;
                padding-left: 30px;
                span{
                    width: 9rem;
                    height: 3rem;
                    background: #e6f5f7;
                    border-radius: 1.5rem;
                    display: inline-block;
                    text-align: center;
                    position: absolute;
                    right: 1.5rem;
                    top: 0.4rem;
                    line-height: 3rem;
                    color: #00b4bc;
                    cursor: pointer;
                    box-sizing: border-box;
                    vertical-align: top;
                    font-size: 19px;
                }

                p{
                    font-weight: lighter;
                    font-size: 1.2rem;
                    padding-right: 0.5rem;
                    color: #333;
                    margin-top: 2.5rem;
                    font-weight: 400;
                    padding-bottom: 0;
                }

                .ax-title{
                    width: 100%;
                    position: relative;
                    font-weight: bold;
                    padding-right: 14rem;
                    font-size: 1.8rem;
                    font-weight: 700;
                    h1{
                        font-size: 25px;
                       
                    }
                    .text-overflow{
                        display:-webkit-box;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        -webkit-box-orient: vertical;
                    }
                    .text-overflow2{
                        -webkit-line-clamp: 4!important;
                        display: -webkit-box;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        -webkit-box-orient: vertical;
                    }
                }

                .ax-from{
                    justify-content: space-between;
                    display: flex;
                    color: #ccc;
                    line-height: 2.2rem;
                    margin-top: 1.4rem;
                    font-size: 1.4rem;
                    width: 100%;
                    box-sizing: border-box;
                    zoom: 1;
                    span{
                        font-size: 1.6rem;
                        font-weight: 500;
                        color: #00b4bc;
                        line-height: 3rem;
                        margin-right: 1.4rem;
                        display: inline-block;
                        vertical-align: top;
                        box-sizing: border-box;
                    }
                    a{
                        width: 10rem;
                        border: 0.1rem solid #00b4bc;
                        height: 3rem;
                        background: #fff;
                        border-radius: 2rem;
                        text-align: center;
                        line-height: 3rem;
                        font-size: 1rem;
                        color: #00b4bc;
                        // margin-right: 5rem;
                    }
                    .hover{
                        transition: all .2s ease-in;
                        position: relative;
                        overflow: hidden;
                        z-index: 2;
                    }
                    .link-button{
                        display: block;

                    }
                }
                
            }
        }
    }
}




</style>